<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .search {
            padding: 10px 20px;
            border-bottom: 1px solid #ccc;
        }

        .search input {
            margin-right: 10px;
            padding: 3px 12px;
            height: 24px;
            width: 80%;
            border-radius: 20px;
            font-size: 12px;
            outline: indianred;
            border: 1px solid #ccc;
        }

        .search button {
            border: 0;
            padding: 4px 10px;
            background-color: red;
            border-radius: 10px;
            color: #fff;

        }

        .main {
            padding: 10px 20px;

        }

        .main .history-title::after {
            content: '';
            display: block;
            clear: both;
        }

        .main .history-title .history-search {
            float: left;
            font-weight: bold;
        }

        .main .history-title .delete {
            float: right;
            color: #bbb;
        }

        .history-list {
            margin-top: 10px;
        }

        .history-list a {
            display: inline-block;
            padding: 3px 5px;
            margin-right: 5px;
            margin-bottom: 5px;
            color: #fff;
            background-color: #ccc;
            font-size: 12px;
            border-radius: 2px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <header class="search">
        <input type="text" placeholder="请输入搜索的商品">
        <button>搜索</button>
    </header>
    <main class="main">
        <p class="history-title">
            <span class="history-search">最近搜索</span>
            <span class="delete">删除</span>
        </p>
        <section class="history-list">
        </section>
    </main>


    <script>
        let btn = document.querySelector('.search button');  //搜索按钮
        let input = document.querySelector('.search input');  //输入框
        // 搜索按钮的点击事件
        btn.addEventListener('click', function () {
            // 获取到输入的值
            let goods = input.value;
            let arr = [];  //定义空数组用来每次搜索的内容
            // 判断输入商品名是否为空
            if (goods == '') {
                return
            }
            // 将本地存储的数据获取过来
            let localData = localStorage.getItem("goods")
            // 判断本地存储的数据是否为空
            if (localData === null) {
                // 如果为空将本次搜索的名称放入空数组
                arr.unshift(goods)
            } else {
                // 如果不为空先将本地存储的数据用JSON.parse()方法转换为数组对象
                arr = JSON.parse(localData)
                // 将最新的搜索名称放入数组
                arr.unshift(goods)
            }
            // 将最新的数组放入本地存储中，（因为本地存储只能存字符串，所以需要用JSON.stringify()方法将数组对象arr转换为字符串）
            localStorage.setItem("goods", JSON.stringify(arr))
            // 每次添加新的搜索名时调用重新加载函数
            loadDate()
        })


        // 页面一刷新就将数据反映在页面上
        function loadDate() {
            // 拿到本地存储中的数据
            let arr = localStorage.getItem("goods")
            // 判断是否为空
            if (arr !== '') {
                // 先将拿到的字符串形式的数据转为数组对象
                arr = JSON.parse(arr)
                let htmlStr = ''
                // 遍历数组，拼接字符串
                arr.forEach(function (v) {
                    htmlStr += `<a href="#">${v}</a>`
                })
                // 将拼接的字符串反映到页面上
                document.querySelector(".history-list").innerHTML = htmlStr;
            }
        }
        loadDate()
    </script>
</body>

</html>